pixi.js/examples/example 7 - Transparent Background/index.html at c84ee1a3113df4c46725e461950e1bfd1db31808

Fork: 0

mark / pixi.js

Find file

Newer

Older

pixi.js / examples / example 7 - Transparent Background / index.html

PixxxeL on 5 Oct 2014 2 KB Replace `tabs` char on 4 `spaces` chars in examples

Raw Blame History

<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 7 transparency</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #FFFFFF;
        }

        .textHolder{
            width: 400px;
        }
    </style>
    <script src="../../bin/pixi.dev.js"></script>
</head>
<body>
    <div class="textHolder">Hi there, I'm some HTML text... blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
     blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
     blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
     blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
    <script>
    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x66FF99);

    // create a renderer instance
    var renderer = PIXI.autoDetectRenderer(400, 300, null, true, true);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);
    renderer.view.style.position = "absolute";
    renderer.view.style.top = "0px";
    renderer.view.style.left = "0px";

    // create a texture from an image path
    var texture = PIXI.Texture.fromImage("bunny.png");

    // create a new Sprite using the texture
    var bunny = new PIXI.Sprite(texture);

    // center the sprite's anchor point
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    // move the sprite to the center of the screen
    bunny.position.x = 200;
    bunny.position.y = 150;

    stage.addChild(bunny);

    function animate() {
        requestAnimFrame(animate);

        // just for fun, lets rotate mr rabbit a little
        bunny.rotation += 0.1;

        // render the stage
        renderer.render(stage);
    }

    requestAnimFrame(animate);
    </script>

    </body>
</html>